<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script>
			// 部门id自增
			let deptId = Date.now();
			/*全选行*/
			function checkTreeAllRow(event){
				let checkedStatus = event.checked
				let checkBoxInput = $(event).parents("thead").next("tbody").children('tr').children('td').children("input[type='checkbox']")
				checkBoxInput.each(function () {
					$(this).prop('checked', checkedStatus)
				})
			}
			/*单选行*/
			function checkTreeRow(event,currentRange){
				let checkedStatus = event.checked
				let trs = $(event).parents("tbody").children('tr');
				let currentIndex = $(event).parents("tr")[0].rowIndex;
				// console.log(currentIndex)
				// let ranges = trs.children("td[title ='range']");
				// console.log(ranges)
				if (checkedStatus == false){
					$('#check_tree_all_row').prop('checked', false)
					// 取消父项子项全部取消
					trs.each(function () {
						let range = $(this).children("td[title ='range']")[0].innerHTML
						if ($(this)[0].rowIndex > currentIndex ) {
							if (range > currentRange) {
								let childCheck = $(this).children('td').children("input[type='checkbox']");
								childCheck.prop('checked',false)
							}
						}
					})
				} else {
					// 选择父项子项全部选择
					trs.each(function () {
						let range = $(this).children("td[title ='range']")[0].innerHTML
						if ($(this)[0].rowIndex > currentIndex ) {
							if (range > currentRange) {
								let childCheck = $(this).children('td').children("input[type='checkbox']");
								childCheck.prop('checked',true)
							} else {
								return false;
							}
						}
					})
					// 找到所有的checkbox
					let checkBoxInput = trs.children('td').children("input[type='checkbox']")
					let checkStatus = true
					// 如果有一个单选框为false，全选为false
					checkBoxInput.each(function () {
						let cruuCheckStatus = $(this)[0].checked
						if (!cruuCheckStatus){
							checkStatus = cruuCheckStatus
						}
					})
					if (checkStatus){
						$('#check_tree_all_row').prop('checked', true)
					} else {
						$('#check_tree_all_row').prop('checked', false)
					}
				}
			}

			/*添加 组织架构*/
			function addTreeTableRow(){
				$('.del_tree_row').show()
				$('#treeTableFieldset').show()
				var table_data = document.getElementById("tree_table_data");
				var tBodies = table_data.tBodies;
				var tbody = tBodies[0];
				let rows = tbody.rows.length
				// 向tbody的插入下一行
				var tr = tbody.insertRow(rows);

				var tmp = ++ deptId
				var tds = table_data.rows[0].cells;//如果不是空表，首先获得表格有多少列，先获取再插入新行
				for (var i = 0; i < tds.length; i++) {//依次向新行插入表格列数的单元格
					var td = tr.insertCell(i);
					td.align='center'
					if (i == 0){
						// 每行的第一列插入单选框
						td.innerHTML = '<input type="checkbox" class="check_row common_class" onclick="checkTreeRow(this,1)"/>';
					} else if (i == 1) {
						td.title = "id";
						td.innerHTML = tmp;
						td.style = "display: none";
						// 第三行插入层级
					} else if (i == 2) {
						td.title = "range";
						td.innerHTML = 1;
						td.style = "display: none";
						// 第四行插入父级部门，顶级部门的id默认为0
					} else if (i == 3) {
						td.title = "parentId";
						td.innerHTML = 0;
						td.style = "display: none";
					}
					else if(i == tds.length-1) {
						td.innerHTML = '<button type="button" id="btn2" class="btn btn-white btn-sm add_child" onclick="addTreeChildRow(this,' + tmp + ',1)"><i class="fa fa-plus"> 添加子部门</i></button>'
						// + '<button type="button" id="btn3" class="btn btn-white btn-sm toogle" onclick="toogle()"><i class="fa fa-plus"> 展开/折叠</i></button>'
					}else if (i == 4){
						td.innerHTML = "<div contenteditable aria-invalid='true' style='text-align: left'></div>";
						td.style="text-align: left";
					} else {
						td.innerHTML = "<div contenteditable></div>";
					}
				}
				// "checked"属性设置为false，也就是取消选中该复选框。
				$('#check_tree_all_row').prop('checked', false)

			}
			/*删除 表格模块 行*/
			function removeTreeTableRow() {
				let checkStatus = false
				var table = document.getElementById("tree_table_data");
				for (var i = table.rows.length - 1; i > 0; i--) {
					if (i == 0){
						continue;
					}
					var chkOrder = table.rows[i].cells[0].firstChild;
					if (chkOrder && chkOrder.checked) {
						checkStatus = true
						//执行删除
						table.deleteRow(i);
						// 如果tbody的行数为0，隐藏所有的行与按钮
						var tableDataRowLength = table.tBodies[0].rows.length;
						if (tableDataRowLength == 0) {
							$('.del_row').hide()
							$('#tableFieldset').hide()
							$(table).children('tbody').children().remove()
							$(table).children('thead').children().remove()
							resetTreeTable()
						}
					}
				}
				if (!checkStatus) {
					$.modal.msgWarning("至少选择一条数据")
					return
				}
			}
			/*重置 表格*/
			function resetTreeTable(){
				var title =
						'<tr>'
						+'	<td bgcolor="#eff3f8" align="center" width="4%"><input type="checkbox" class="common_class" id="check_tree_all_row" onclick="checkTreeAllRow(this)"/></td>'
						+'  <td style="display: none">id</td>'
						+'  <td style="display: none">层级</td>'
						+'  <td style="display: none">parentId</td>'
						+'	<td bgcolor="#eff3f8" align="center"><div class="table_header" >部门</div></td>'
						+'	<td bgcolor="#eff3f8" align="center"><div class="table_header" >领导人</div></td>'
						+'  <td bgcolor="#eff3f8" align="center" width="20%"><div class="table_header" >操作</div></td>'
						+'</tr>'
				$('#tree_table_data').children('thead').append(title)
			}

			/*添加子部门*/
			function addTreeChildRow(event,parentId,range){
				let rowNumber = $(event).parents("tr")[0].rowIndex
				console.log("parentId:"+ parentId +";range:"+ range + ":rowNumber:" + rowNumber)
				++range;
				var table_data = document.getElementById("tree_table_data");
				var tBodies = table_data.tBodies;
				var tbody = tBodies[0];
				var trs1 = tbody.getElementsByTagName("tr");
				var tr1 = trs1.item(rowNumber-1);
				var tds1 = tr1.getElementsByTagName("td");
				var divs = tds1.item(4).getElementsByTagName("div");
				var div  = divs.item(0)
				var content = div.innerHTML;
				if (content == null || content === ''|| content == undefined) {
					$.modal.msgWarning("请填写父级部门名称")
					return;
				}

				var tr = tbody.insertRow(rowNumber)
				var tmp = ++ deptId
				var tds = table_data.rows[0].cells;//如果不是空表，首先获得表格有多少列，先获取再插入新行
				for (var i = 0; i < tds.length; i++) {//依次向新行插入表格列数的单元格
					var td = tr.insertCell(i);
					td.align='center';
					if (i == 0){
						// 每行的第一列插入单选框
						td.innerHTML = '<input type="checkbox" class="check_row common_class" onclick="checkTreeRow(this,'+ range +')"/>';
					} else if (i == 1) {
						td.title = "id";
						td.innerHTML = tmp;
						td.style = "display: none";
						// 第三行插入层级
					} else if (i == 2) {
						td.title = "range";
						td.innerHTML = range;
						td.style = "display: none";
						// 第四行插入父级部门，顶级部门的id默认为0
					} else if (i == 3) {
						td.title = "parentId";
						td.innerHTML = parentId;
						td.style = "display: none";
					}
					else if(i == tds.length-1) {
						td.innerHTML = '<button type="button" id="btn2" class="btn btn-white btn-sm add_child" onclick="addTreeChildRow(this,' + tmp + ','+ range +')"><i class="fa fa-plus"> 添加子部门</i></button>'
						// + '<button type="button" id="btn3" class="btn btn-white btn-sm toogle" onclick="toogle()"><i class="fa fa-plus"> 展开/折叠</i></button>'
					}else if (i == 4){
						var html = "";
						for (let j = 0; j < range-1; j++) {
							html = html + "<span>&nbsp;&nbsp;&nbsp;&nbsp;</span><span>&nbsp;&nbsp;&nbsp;&nbsp;</span>"
						}
						html = html + "<div contentEditable aria-invalid='true' style='text-align: left; display: inline-block'></div>";
						td.innerHTML = html;
						td.style="text-align: left";
					} else {
						td.innerHTML = "<div contenteditable></div>";
					}
				}
				// "checked"属性设置为false，也就是取消选中该复选框。
				$('#check_tree_all_row').prop('checked', false)

			}
		</script>
		<script>
			$(function () {
				// 表格数据编辑回显
				huixiantable()
			})
			function huixiantable() {
				let orgStructure = "[[\"1\",\"1\",\"0\",\"发士大夫\",\"zhangsan\"],[\"3\",\"2\",\"1\",\"公司法\",\"lisi\"],[\"2\",\"1\",\"0\",\"敢死队风格\",\"wangwu\"]]";
				if (orgStructure && orgStructure!=''){
					let orgList = JSON.parse(orgStructure);
					var trAllHtml = '';
					for (let i = 0; i < orgList.length; i++) {
						var range = orgList[i][1];
						var id = orgList[i][0];
						var trHtml = '<tr><td align="center"><input type="checkbox" class="check_row common_class" onclick="checkTreeRow(this,'+ range +')"/></td>'
						for (let j = 0; j < orgList[i].length; j++) {
							if (j == 0) {
								// id
								trHtml =  trHtml + '<td align="center" title="id" style="display: none">'+orgList[i][j]+'</td>'
							} else if (j == 1) {
								//range
								trHtml =  trHtml + '<td align="center" title="range" style="display: none">'+orgList[i][j]+'</td>'
							} else if (j == 2) {
								// parentId
								trHtml =  trHtml + '<td align="center" title="parentId" style="display: none">'+orgList[i][j]+'</td>'
							} else if (j == 3) {
								if (range == 1) {
									trHtml = trHtml + '<td align="center"  style="text-align: left"><div contenteditable aria-invalid="true" style="text-align: left">'+ orgList[i][j] +'</div></td>'
								} else {
									var html = "";
									for (let k = 1; k < range; k++) {
										html = html + "<span>&nbsp;&nbsp;&nbsp;&nbsp;</span><span>&nbsp;&nbsp;&nbsp;&nbsp;</span>"
									}
									html = html + "<div contentEditable aria-invalid='true' style='text-align: left; display: inline-block'>"+ orgList[i][j] +"</div>";
									trHtml = trHtml + '<td align="center"  style="text-align: left">' + html + '</td>'
								}
							} else if (j == 4) {
								trHtml = trHtml + '<td align="center"><div contenteditable>'+orgList[i][j] +'</div></td>'
							}
						}
						// 插入操作
						trHtml = trHtml +
								'<td align="center"><button type="button" id="btn2" class="btn btn-white btn-sm add_child" onclick="addTreeChildRow(this,' + id + ',' + range + ')"><i class="fa fa-plus"> 添加子部门</i></button></td>'
						trHtml = trHtml + '</tr>'
						trAllHtml = trAllHtml + trHtml;
					}
					var table_dataTable = document.getElementById("tree_table_data");

					$(table_dataTable).children('tbody').children().remove()
					$(table_dataTable).children('tbody').append(trAllHtml)

					$('.del_tree_row').show()
					$('#treeTableFieldset').show()
				} else {
					resetTreeTable()
				}
			}
		</script>

	</head>

	<body>
		<div class="row">
			<div class="col-sm-12 custem_table" >
				<input id="orgStructure" name="org_structure" type="hidden"/>
				<button type="button" id="btn1" class="btn btn-white btn-sm add_row" onclick="addTreeTableRow()"><i class="fa fa-plus"> 增加行</i></button>
				<button type="button" class="btn btn-white btn-sm del_tree_row" onclick="removeTreeTableRow(this)" style="display:none"><i class="fa fa-minus"> 删除行</i></button>
				<fieldset class="fieldset" id="treeTableFieldset" style="display:none">
					<table class="table_data" id="tree_table_data" bordercolor="#e5e6e7" border="1" cellpadding="2" width="100%">
						<thead>
						<tr>
							<td bgcolor="#eff3f8" align="center" name="Num" width="4%"><input type="checkbox" class="common_class" id="check_tree_all_row" onclick="checkTreeAllRow(this)"/></td>
							<td style="display: none">id</td>
							<td style="display: none">层级</td>
							<td style="display: none">parentId</td>
							<td bgcolor="#eff3f8" align="center"><div class="table_header" >部门</div></td>
							<td bgcolor="#eff3f8" align="center"><div class="table_header" >领导人</div></td>
							<td bgcolor="#eff3f8" align="center" width="20%"><div class="table_header" >操作</div></td>
						</tr>
						</thead>
						<tbody></tbody>
					</table>
				</fieldset>
			</div>
		</div>
	</body>
</html>

<!--<span class="treetable-indent"></span><span class="treetable-expander glyphicon glyphicon-chevron-down"></span>-->
